<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">

    class NameForm extends React.Component{
      constructor(props){
        super(props);
        this.state = {value:''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event){
        console.log('value changed');
        this.setState({value:event.target.value.toUpperCase()});
      }

      handleSubmit(event){
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
      }

      render(){
        return <form onSubmit={this.handleSubmit}>
                  <label>
                    Name:
                      <input type="text" value={this.state.value} onChange={this.handleChange}/>
                  </label>
                  <input type="submit" value="Submit"/>
                </form>;
      }
    }

    ReactDOM.render(<NameForm/>,document.getElementById('root'));
  </script>
  <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
</body>

</html>